<script setup>
import useCategoryStore from '@/store/category';
import { watch, ref,reactive,nextTick,onBeforeUnmount,onMounted } from 'vue'
import { reqAttr,reqAddOrUpdateAttr,reqDeleteAttr,reqHasSaleAttr,reqAddOrUpdateSaleAttr,reqDeleteSaleAttr } from '@/api/product/attr'
import {ElMessage} from 'element-plus'
import cloneDeep from 'lodash/cloneDeep'

let categoryStore = useCategoryStore()

let attrType = ref(['平台属性','销售属性'])
let selectType = ref(0)  // 保存用户选择的属性类型
selectType.value = categoryStore.selectType

let dialogFormVisible = ref(false)  // 控制 添加修改销售属性dialog的显示与隐藏
let saleAttrParams = reactive({  // 收集销售属性的各种值
    id:0,
    name:'',
    categoryId:'',
})

let attrArr = ref([])  // 存储数据

let scene = ref(0)  // 控制页面是显示属性，还是添加属性，0显示属性值，1显示添加属性界面
let attrParams = reactive({
    "attrName":"",  // 属性名
    "attrValueList":[], // 属性值列表 {"valueName":""}
    "categoryId":"",  // 三级分类id
    "categoryLevel":3,  // 所属分类等级，这里固定是3
    "flagList":[]
})

// let flag = ref(true)  // 控制编辑模式与显示模式相互切换
let inputArr = ref([])

// 监听仓库三级分类 categoryStore.c3Id 的变化
watch(() => categoryStore.c3Id, () => {
    // 清空上一次查询的属性与属性值
    attrArr.value = []

    if (categoryStore.c3Id) {
        getAttr()
    }
})

onMounted(()=>{
    if (categoryStore.c3Id) {
        getAttr()
    }
})

// 用户改变属性类型时触发事件
const changeAttrType = (value) =>{
    categoryStore.selectType = value
    getAttr()
}


// 获取已有的属性与属性值方法
const getAttr = async () => {
    let { c1Id, c2Id, c3Id } = categoryStore

    if(selectType.value==0){
        // 获取平台属性
        reqAttr(c3Id).then(res=>{
            if (res.data.code == 200) {
                attrArr.value = res.data.data
            }
        })
    }else if(selectType.value==1){
        // 获取销售属性
        reqHasSaleAttr(c3Id).then(res=>{
            if (res.data.code == 200) {
                // attrArr.value = res.data.data
                attrArr.value = res.data.data
            }
        })
    }
    
    
}
// 点击添加属性按钮触发事件
const addAttr = ()=>{
    // 添加平台属性，或者添加销售属性
    if(selectType.value==0){
        // 每次点击添加属性时，清空数据，也就是初始化数据
        // 注意这里不能用attrParams={}的方式去清空数据，因为attrParams是一个响应式对象
        Object.assign(attrParams,{
            "attrName":"",
            "attrValueList":[],
            "categoryId":"",
            "categoryLevel":3,
            "flagList":[]  // 用来控制input编辑元素的显示与隐藏的
        })
        delete attrParams.id  // 因为是新增所以要删除id
        scene.value=1
        attrParams.categoryId=categoryStore.c3Id
    }else if(selectType.value==1){
        // 添加销售属性
        dialogFormVisible.value=true
        // 初始化数据
        Object.assign(saleAttrParams,{
            id:0,
            name:'',
            categoryId:categoryStore.c3Id,
        })
    }
    
}
// 点击编辑属性按钮触发事件
const updateAttr = (row)=>{
    if(row.is_system){
        ElMessage({
            type:'error',
            message:'系统数据，不能修改'
        })
        return
    }

    if(selectType.value==0){
        // 首先把当前表格行的数据赋值给attrParams
        // 注意这里row因为有二级对象，Object.assign对二级对象只能进行浅拷贝，所以这里用lodash库里的cloneDeep，直接深拷贝(复制)一份数据给attrParams
        Object.assign(attrParams,cloneDeep({
            "id":row.id,
            "attrName":row.name,
            "attrValueList":row.value_list,
            "categoryId":row.category_id,
            "categoryLevel":3,
            "is_system":row.is_system,
            "flagList":row.value_list.map(item=>false)  // flag一开始都为false，也就是input编辑元素默认都不显示
        }))

        scene.value=1
    }else if(selectType.value==1){
        Object.assign(saleAttrParams,{
            id: row.id,
            name: row.name,
            categoryId: row.category_id,
            is_system: row.is_system,
        })
        dialogFormVisible.value=true
    }
}
// 点击取消按钮触发事件
const cancel = ()=>{
    scene.value=0
}
// 点击保存按钮触发事件
const save = ()=>{
    // 校验数据
    if(attrParams.is_system){
        ElMessage({
            type:'error',
            message:'系统数据，不能修改'
        })
        return
    }
    if( !/\S/.test(attrParams.attrName)){
        ElMessage({
            type:'error',
            message:'属性名不能为空'
        })
        return
    }
    for(let i of attrParams.attrValueList){
        if(!/\S/.test(i)){
            ElMessage({
                type:'error',
                message:'属性值不能为空'
            })
            return
        }
    }

    // 收集参数，发送请求
    reqAddOrUpdateAttr(attrParams).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type:'success',
                message:attrParams.id?'属性修改成功':'属性添加成功'
            })
            getAttr()
            scene.value=0
            getAttr()
        }else{
            console.log('属性添加失败，');
            ElMessage({
                type:'error',
                message:attrParams.id?'属性修改失败,'+res.data.msg:'属性添加失败,'+res.data.msg
            })
        }
    })
}
// 点击添加属性按钮触发
const addAttrValue = ()=>{
    attrParams.attrValueList.push('')
    attrParams.flagList.push(true)
    nextTick( () => {
        inputArr.value[attrParams.attrValueList.length-1].focus()
    })
}
// 属性值表单元素失去焦点触发事件
const toLook = (row,$index)=>{
    
    // 判断属性值是否为空
    if(row.trim()==""){
        ElMessage({
            type:'error',
            message:'属性值不能为空'
        })
        // 删除该值
        // attrParams.attrValueList.splice($index,1)
        return
    }
    // 判断属性值是否已存在
    let repeat = attrParams.attrValueList.find((item,index)=>{
        // 判断数组中是否有相同值时，需要排除自己
        if(index != $index ){
            return item === row
        }
    })
    if(repeat){
        ElMessage({
            type:'error',
            message:'属性值已存在'
        })
        return
    }

    attrParams.flagList[$index]=false  // 隐藏输入框

}
// 点击属性值表单元素时触发事件
const toEdit = (row,$index)=>{
    attrParams.flagList[$index]=true
    // 点击div标签时，切换到编辑input元素，并聚焦到该input上
    nextTick( () => {
        inputArr.value[$index].focus()
    })

}
// 点击 添加、编辑界面的 删除属性值按钮触发的事件
const deleteAttrValue = (row,$index) => {
    attrParams.attrValueList.splice($index,1)
    attrParams.flagList.splice($index,1)
}


// 点击删除属性按钮触发的方法
const deleteAttr = (row)=>{
    // 判断是不是系统数据
    if(row.is_system){
        ElMessage({
            type:'error',
            message:'系统数据，不能修改'
        })
        return
    }
    if(selectType.value==0){
        reqDeleteAttr(row.id).then(res=>{
            if(res.data.code==200){
                ElMessage({
                    type:'success',
                    message:'删除属性成功'
                })
                getAttr()
            }else{
                ElMessage({
                    type:'error',
                    message:'删除失败，'+ res.data.msg
                })
            }
        })
    }else if(selectType.value==1){
        reqDeleteSaleAttr(row.id).then(res=>{
            if(res.data.code==200){
                ElMessage({
                    type:'success',
                    message:'删除属性成功'
                })
                getAttr()
            }else{
                ElMessage({
                    type:'error',
                    message:'删除失败，'+ res.data.msg
                })
            }
        })
    }
    
}

// 在 添加、编辑销售属性 界面点击确定按钮触发事件
const saveSaleAttr = () => {
    // 校验数据
    if(attrParams.is_system){
        ElMessage({
            type:'error',
            message:'系统数据，不能修改'
        })
        return
    }
    if( !/\S/.test(saleAttrParams.name)){
        ElMessage({
            type:'error',
            message:'属性名不能为空'
        })
        return
    }

    // 收集参数，发送请求
    reqAddOrUpdateSaleAttr(saleAttrParams).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type:'success',
                message:saleAttrParams.id?'属性修改成功':'属性添加成功'
            })
            getAttr()
            dialogFormVisible.value=false
        }else{
            console.log('属性添加失败，');
            ElMessage({
                type:'error',
                message:saleAttrParams.id?'属性修改失败,'+res.data.msg:'属性添加失败,'+res.data.msg
            })
        }
    })


    
}


// 路由组件销毁时触发函数，把仓库相关的数据清空
// onBeforeUnmount(()=>{
//     // 把仓库的数据清空重置
//     categoryStore.$reset()
// })

</script>

<template>
    <div>
        <!-- 三级分类全局组件 -->
        <Category :scene="scene"></Category>

        <el-card style="margin: 10px 0;">
            <!-- 展示数据 -->
            <div v-show="scene==0">
                <!-- 如果c3Id的值存在，按钮则可用，否则不可用 -->
                <el-select v-model="selectType" placeholder="请选择属性类型" style="margin-right:10px;" @change="changeAttrType" :disabled="categoryStore.c3Id ? false : true">
                    <el-option v-for="(item,index) in attrType" :key="index" :label="item" :value="index" />
                </el-select>
                <el-button v-has="`btn.Attr.add`" @click="addAttr" type="primary" icon="Plus" :disabled="categoryStore.c3Id ? false : true">添加属性</el-button>
                <el-table border style="margin: 10px 0;" :data="attrArr">
                    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                    <el-table-column label="属性名称" width="120px" prop="name"></el-table-column>
                    <el-table-column :label=" selectType==0 ? '属性值':'' " show-overflow-tooltip>
                        <template #="{ row, $index }">
                            <el-tag style="margin: 0 5px;" v-for="(item, index) in row.value_list" :key="index">{{ item }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120px">
                        <template #="{ row, $index }">
                            <el-button v-has="`btn.Attr.edit`" type="primary" size="small" icon="Edit" @click="updateAttr(row)" title="编辑"></el-button>
                            
                            <el-popconfirm :title="`你确定要删除${row.name}吗？`" width="200px"  @confirm="deleteAttr(row)">
                                <template #reference>
                                    <el-button v-has="`btn.Attr.delete`" type="primary" size="small" icon="Delete" title="删除"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </div>

            <!-- 添加与修改平台属性 -->
            <div v-show="scene==1">
                <el-form :inline="true">
                    <el-form-item label="属性名称">
                        <el-input placeholder="请输入属性名称" v-model="attrParams.attrName"></el-input>
                    </el-form-item>
                </el-form>
                <el-button @click="addAttrValue" :disabled="attrParams.attrName?false:true" type="primary" icon="Plus">添加属性</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>

                <el-table border style="margin: 10px 0;" :data="attrParams.attrValueList">
                    <el-table-column label="序号" width="80px" type="index" align="center"></el-table-column>
                    <el-table-column label="属性值名称">
                        <!-- row及为当前属性值对象 -->
                        <template #="{row,$index}">
                            <!-- <el-input :ref="(vc)=>inputArr[$index]=vc" v-if="row.flag" @blur="toLook(row,$index)" placeholder="请输入属性值名称" v-model="row.valueName"></el-input>
                            <div v-else @click="toEdit(row,$index)" @blur="toLook">{{ row.valueName }}</div> -->
                            <!-- <el-input v-if = "(row[1])" v-model="row"></el-input> -->
                            <el-input v-if="attrParams.flagList[$index]" :ref="(el)=>inputArr[$index]=el" @blur="toLook(row,$index)" 
                                v-model="attrParams.attrValueList[$index]">
                            </el-input>
                            <div v-else @click=toEdit(row,$index)>{{ row }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="属性值操作">
                        <template #="{row,$index}">
                            <el-button type="primary" size="small" icon="Delete" @click="deleteAttrValue(row,$index)" title="删除"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-button type="primary" @click="save" :disabled="attrParams.attrValueList.length >0 ? false:true">保存</el-button>
                <el-button type="primary" @click="cancel">取消</el-button>

            </div>

        </el-card>

        <!-- 添加与修改销售属性 -->
        <el-dialog v-model="dialogFormVisible" :title="saleAttrParams.id?'编辑销售属性':'添加销售属性' ">
            <el-form :model="saleAttrParams">
                <el-form-item label="名称">
                    <el-input v-model="saleAttrParams.name"/>
                </el-form-item>
            </el-form>
            <template #footer>
            <span>
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="saveSaleAttr">确定</el-button>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<style scoped lang="scss"></style>